<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <meta name="keywords" content="干瞪眼,计分器">
    <meta name="description" content="干瞪眼计分器小工具。">
    <meta name="author" content="壹羊炖错">

    <title>干瞪眼计分器</title>
    <style>
        /* 重新定义页面边距 */
        body {
            margin: 0;
            padding: 0;

        }

        /* 标题及计分板样式 */
        .nt1 {
            text-align: center;
            /* background-color: rgb(130, 79, 247); */
            padding: 20px 0 0 0;
        }

        /* 输入框样式 */
        .ipt {
            height: 40px;
            width: 80px;
            font-family: "等线";
            font-size: 16px;
            text-align: center;
            margin: 10px 0px 10px 0px;

        }


        /* 按钮样式 */
        .btn1 {
            background-color: rgb(255, 255, 255);
            height: 40px;
            width: 100px;
            margin: 10px;
            font-size: 18px;
            font-family: "等线";
            font-weight: bold;
            color: #000;
            border: none;
            border-radius: 10px;
            box-shadow: 1px 1px 5px 2px #808080;
        }

        /* 鼠标点击按钮的动画反馈 */
        .btn1:active {
            background-color: #fff;
            transform: scale(0.92);
        }
        /* 清空按钮样式 */
        .btncls {
            background-color: rgb(255, 170, 170);
            height: 40px;
            width: 100px;
            margin: 10px;
            font-size: 18px;
            font-family: "等线";
            font-weight: bold;
            color: #000;
            border: none;
            border-radius: 10px;
            box-shadow: 1px 1px 5px 2px #808080;
        }

        /* 清空按钮点击动画 */
        .btncls:active {
            background-color: rgb(255, 220, 220);
            transform: scale(0.92);
        }

        /* 计分板样式 */
        .ctn {
            display: inline-block;
            height: 18px;
            width: 75px;
            font-family: "等线";
            font-size: 18px;
            text-align: center;
            margin: 0px;
            /* border: #000 1px solid; */

        }

        /* 计分板数字样式 */
        .cts {
            display: inline-block;
            height: 18px;
            width: 80px;
            font-family: "等线";
            font-size: 18px;
            text-align: center;
            margin: 0px;
            /* border: #000 1px solid; */

        }

        /* 计分板容器样式 */
        .cttt {
            margin: 0 auto;
            overflow-y: scroll;
            height: 200px;
            width: 350px;
            padding: 2px;
            border: #888 1px solid;
            box-shadow: 2px 2px 10px 5px #ccc;
        }

        /* 标题样式 */
        .tt {
            font-family: "等线";
            font-weight: bold;
            font-size: 30px;
            text-align: center;
            margin: 30px 0 10px 0;
        }
        .tt1 {
            font-family: "等线";
            font-weight: bold;
            font-size: 20px;
            text-align: center;
            margin: 30px 0 10px 0;
        }

        /* 速查表样式 */
        .tb {
            border-collapse: collapse;
            text-align: center;
            width: 355px;
            margin-right: auto;
            margin-left: auto;
            margin-top: 30px;
            font-family: "等线";
            font-size: 16px;
        }
    </style>
</head>

<body>
    <P class="tt">干瞪眼计分器</P>
    <div class="nt1">
        <!-- 玩家姓名区域 -->

        <div>
            <input id="plr1" type="text" class="ipt" placeholder="玩家一姓名">
            <input id="plr2" type="text" class="ipt" placeholder="玩家二姓名">
            <input id="plr3" type="text" class="ipt" placeholder="玩家三姓名">
            <input id="plr4" type="text" class="ipt" placeholder="玩家四姓名">
        </div>

        <!-- 计分操作区域 -->

        <div>
            <input id="sco1" type="text" class="ipt" placeholder=本局分数 maxlength="3">
            <input id="sco2" type="text" class="ipt" placeholder=本局分数 maxlength="3">
            <input id="sco3" type="text" class="ipt" placeholder=本局分数 maxlength="3">
            <input id="sco4" type="text" class="ipt" placeholder=本局分数 maxlength="3">
        </div>
        <!-- 计分与重置按钮 -->
        <div>
            <button class="btncls" onclick="cls()">清空计分</button>
            <button class="btn1" onclick="newgame()">新的一局</button>
            <button class="btn1" onclick="addele()">计入分数</button>
        </div>

    </div>
    <!-- 计分板 -->
    <div>
        <p class="tt1">计分板</p>
        <div style="text-align: center;">
            <!-- 计分板姓名 -->
            <div>
                <div class="ctn" id="pl1">玩家一</div>
                <div class="ctn" id="pl2">玩家二</div>
                <div class="ctn" id="pl3">玩家三</div>
                <div class="ctn" id="pl4" style="margin: 0 30px 10px 0;">玩家四</div>
            </div>
        </div>
        <div id="ct" class="cttt">
            <!-- 计分板数据 -->
            <div id="sco">
                <!-- 分数加入位置 -->
            </div>
        </div>
    </div>
    <div>
        <table border="1" class="tb">
            <tr>
                <th>翻/张</th>
                <th>2张</th>
                <th>3张</th>
                <th>4张</th>
                <th>5张</th>
                <th>6张</th>
            </tr>
            <tr>
                <td style="font-weight: bold;">4番</td>
                <td>32</td>
                <td>48</td>
                <td>64</td>
                <td>80</td>
                <td>96</td>
            </tr>
            <tr>
                <td style="font-weight: bold;">5翻</td>
                <td>64</td>
                <td>96</td>
                <td>/</td>
                <td>/</td>
                <td>/</td>
            </tr>
        </table>
    </div>

</body>
<script>
    // 声明全局变量用于存储累计分数
    let ttsco = [0, 0, 0, 0];
    // 玩家1姓名绑定姓名版
    let a1 = document.getElementById("plr1");
    let d1 = document.getElementById("pl1");
    a1.onkeyup = function () {
        d1.innerHTML = a1.value;
    }
    // 玩家2姓名绑定姓名版
    let a2 = document.getElementById("plr2");
    let d2 = document.getElementById("pl2");
    a2.onkeyup = function () {
        d2.innerHTML = a2.value;
    }
    // 玩家3姓名绑定姓名版
    let a3 = document.getElementById("plr3");
    let d3 = document.getElementById("pl3");
    a3.onkeyup = function () {
        d3.innerHTML = a3.value;
    }
    // 玩家4姓名绑定姓名版
    let a4 = document.getElementById("plr4");
    let d4 = document.getElementById("pl4");
    a4.onkeyup = function () {
        d4.innerHTML = a4.value;
    }

    function cls() {
        let ct = document.getElementById("ct");
        let div0 = document.getElementById("sco");
        ct.removeChild(div0);
        let div00 = document.createElement("div");
        let att00 = document.createAttribute("id");
        att00.value = "sco";
        div00.setAttributeNode(att00);
        ct.appendChild(div00);

        console.log("=================================================")
        console.log("用户点击了“清空计分”按钮，清空了输入框和计分板。")
        console.log("清空总分前的分数为：" + ttsco);
        // 操作总分数组归零
        for (let i = 0; i < ttsco.length; i++) {
            ttsco[i] = ttsco[i] - ttsco[i]
        };
        // 清空输入框
        document.getElementById("sco1").value = "";
        document.getElementById("sco2").value = "";
        document.getElementById("sco3").value = "";
        document.getElementById("sco4").value = "";
        console.log("清空总分成功！目前的总分为：" + ttsco);
        console.log("=================================================")


    }

    function newgame() {
        // 获取时间并格式化
        let myt = new Date();
        let y = myt.getFullYear();
        let m = myt.getMonth() + 1;
        let d = myt.getDate();
        let h = myt.getHours();
        let mi = myt.getMinutes();
        let s = myt.getSeconds();
        // 创建一个时间div
        let lct = document.getElementById("sco");
        let divh = document.createElement("div");
        let atth = document.createAttribute("style")
        atth.value = "text-align:center;color:#888";
        divh.setAttributeNode(atth);
        divh.innerHTML = "-----" + y + "-" + m + "-" + d + " " + h + ":" + mi + ":" + s + "-----";
        lct.append(divh);

        console.log("=================================================")
        console.log("用户点击了“新的一局”按钮，清空了输入框和总分。")
        console.log("清空总分前的分数为：" + ttsco);

        // 操作总分数组归零
        for (let i = 0; i < ttsco.length; i++) {
            ttsco[i] = ttsco[i] - ttsco[i]
        };

        // 清空输入框
        document.getElementById("sco1").value = "";
        document.getElementById("sco2").value = "";
        document.getElementById("sco3").value = "";
        document.getElementById("sco4").value = "";
        // 滚动条滚动到底部
        var element = document.getElementById("ct");
            element.scrollTop = element.scrollHeight;

        console.log("清空总分成功！目前的总分为：" + ttsco);
        console.log("=================================================")

    }

    function addele() {
        console.log("=================================================")
        console.log("计分前的分数:" + ttsco);
        // 创建一个数组用于存放用户输入分数
        let tssco = [0, 0, 0, 0];

        // 获取用户输入数据并将数据转化为数字格式
        tssco[0] = document.getElementById("sco1").value * 1;
        tssco[1] = document.getElementById("sco2").value * 1;
        tssco[2] = document.getElementById("sco3").value * 1;
        tssco[3] = document.getElementById("sco4").value * 1;
        console.log("用户输入的分数：" + tssco);

        // 判断用户是否输入的是数字
        if (tssco[0] < 10000 && tssco[1] < 10000 && tssco[2] < 10000 && tssco[3] < 10000) {


            // 将累计分数与本次分数相加
            for (let i = 0; i < tssco.length; i++) {
                ttsco[i] = ttsco[i] + tssco[i]
            };
            console.log("目前总分:" + ttsco);
            // 清空输入框
            document.getElementById("sco1").value = "";
            document.getElementById("sco2").value = "";
            document.getElementById("sco3").value = "";
            document.getElementById("sco4").value = "";
            console.log("=================================================")

            // 新增元素
            let lct = document.getElementById("sco");
            // 新增一行数据容器
            let div0 = document.createElement("div");
            lct.appendChild(div0);
            // 玩家一分数容器
            let div1 = document.createElement("div");
            let att1 = document.createAttribute("class");
            let node1 = document.createTextNode(ttsco[0]);
            att1.value = "cts";
            div1.setAttributeNode(att1);
            div1.appendChild(node1);
            div0.appendChild(div1);
            // 玩家二分数容器
            let div2 = document.createElement("div");
            let att2 = document.createAttribute("class");
            let node2 = document.createTextNode(ttsco[1]);
            att2.value = "cts";
            div2.setAttributeNode(att2);
            div2.appendChild(node2);
            div0.appendChild(div2);
            // 玩家三分数容器
            let div3 = document.createElement("div");
            let att3 = document.createAttribute("class");
            let node3 = document.createTextNode(ttsco[2]);
            att3.value = "cts";
            div3.setAttributeNode(att3);
            div3.appendChild(node3);
            div0.appendChild(div3);
            // 玩家三分数容器
            let div4 = document.createElement("div");
            let att4 = document.createAttribute("class");
            let node4 = document.createTextNode(ttsco[3]);
            att4.value = "cts";
            div4.setAttributeNode(att4);
            div4.appendChild(node4);
            div0.appendChild(div4);
            // 滚动条滚动到底部
            var element = document.getElementById("ct");
            element.scrollTop = element.scrollHeight;
        } else {
            alert("请正确输入数字！");
            console.log("=================================================")
            console.log("用户在分数框中输入的不是数字,或数字大于10000!");
            console.log("=================================================")
        }
    }

</script>

</html>